{% extends "base.html" %}
{% block page_title %}Fingerprints{% endblock %}
{% block css %}
	<style type="text/css">
    .labels {
      color: black;
     background-color: white;
      font-family: "Lucida Grande", "Arial", sans-serif;
      font-size: 10px;
      font-weight: bold;
      text-align: center;
      width: 60px;     
      border: 2px solid black;
      white-space: nowrap;
    }
    .alerts {
      color: red;
      background-color: white;
      font-family: "Lucida Grande", "Arial", sans-serif;
      font-size: 10px;
      font-weight: bold;
      text-align: center;
      width: 60px;     
      border: 2px solid black;
      white-space: nowrap;
    }
	</style>
{% endblock %}
{% block head_script %}
	<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyABr0u2Ibrr0CZmxaGnOhHWsOKar7ZFWaA&sensor=false"></script>
	<script src="/static/markerwithlabel.js" type="text/javascript"></script>
		<script type="text/javascript">
	

  function initializemap() {
		var myLatLng = new google.maps.LatLng(25, 0);
		var myOptions = {
		  zoom: 2,
		  center: myLatLng,
		  mapTypeId: google.maps.MapTypeId.TERRAIN
		};
 
    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
	// exmaple path
	///*
	
	// bad path
	{% if badpaths %}
	{% for onepath in badpaths %}
		var path = [];
		{% for point in onepath %}
			path.push(new google.maps.LatLng({{point.lat}}, {{point.longi}}));
		{% endfor %}
		var asPath = new google.maps.Polyline({
		  path:path,
		  strokeColor: "#FFFF00",
		  strokeOpacity: 1.0,
		  strokeWeight: 2
		});
		asPath.setMap(map);
	{% endfor %}
	{% endif %}
	//good path
	/*{% if goodpaths %}
	{% for onepath in goodpaths %}
		var path = [];
		{% for point in onepath %}
			path.push(new google.maps.LatLng({{point.lat}}, {{point.longi}}));
		{% endfor %}
		var asPath = new google.maps.Polyline({
		  path:path,
		  strokeColor: "#33FF00",
		  strokeOpacity: 1.0,
		  strokeWeight: 2
		});
		asPath.setMap(map);
	{% endfor %}
	{% endif %}
	*/
	//bad path segment
	var path = [];
	{% for point in badpathsegment %}
		path.push(new google.maps.LatLng({{point.lat}}, {{point.longi}}));
	{% endfor %}
    var yellowimage = {
		url: "/static/mm_32_yellow.png",
		size: new google.maps.Size(24, 40),
		origin: new google.maps.Point(0,0),
		anchor: new google.maps.Point(15,30)
	};
	var greenimage = {
		url: "/static/mm_32_green.png",
		size: new google.maps.Size(24, 40),
		origin: new google.maps.Point(0,0),
		anchor: new google.maps.Point(15,30)
	};
	var redimage = {
		url: "/static/mm_20_red.png",
		size: new google.maps.Size(24, 40),
		origin: new google.maps.Point(0,0),
		anchor: new google.maps.Point(15,30)
	};
	{% for point in goodpoints %}
			var latLng = new google.maps.LatLng({{point.lat}} + Math.random() * 0.2 - 0.1, {{point.longi}} + Math.random() * 2 - 1);
			var title = "AS ".concat({{point.title}});
		    var marker1 = new MarkerWithLabel({
		      position: latLng,
		      draggable: true,
		      map: map,
		      labelContent: title,
		      labelAnchor: new google.maps.Point(32, 0),
		      labelClass: "labels", // the CSS class for the label
		      labelStyle: {opacity: 0.75},
			  icon: yellowimage
		    });
	{% endfor %}

	{% for point in badpoints %}
			var latLng = new google.maps.LatLng({{point.lat}} + Math.random() * 0.2 - 0.1, {{point.longi}} + Math.random() * 2 - 1);
			var title = "AS ".concat({{point.title}});
		    var marker1 = new MarkerWithLabel({
		      position: latLng,
		      draggable: true,
		      map: map,
		      labelContent: title,
		      labelAnchor: new google.maps.Point(32, 0),
		      labelClass: "alerts", // the CSS class for the label
		      labelStyle: {opacity: 1},
		    });
	{% endfor %}

	var asPath = new google.maps.Polyline({
	  path:path,
	  strokeColor: "#FF0000",
	  strokeOpacity: 1.0,
	  strokeWeight: 2
	});
	asPath.setMap(map);
	
  }
</script>
{% endblock %}
{% block load_event %}onload="initializemap()"{% endblock %}
{% block content %}
  {% if sigs %}
  <div id="featured-projects">
    {% ifequal first6 -1 %}
    <h4>Routing Anomaly Information</h4>
    {% else %}
    <h4>Hijacking Alarm Information</h4>
    {% endifequal %}
	
    <table>
      <tr>
        <th>Time (UTC)</th>
        <!--<th>Timestamp</th>-->
        <th>IP Prefix</th>
        <th>CC</th>
        <th>
          {% if alarms.0.0.homeas %}
          Suspicious Origin AS
          {% else %}
            {% if alarms.0.5 %}Suspicious AS Triple in Path
            {% else %}Suspicious AS Edge in Path
            {% endif %}
          {% endif %}
        </th>
        {% ifequal first6 -1 %}
        <th>Max Fing.</th>
        <th>Min Fing.</th>
        <th>Avg Fing. [-1, 1]</th>
        {% else %}
        <th>Alarm Delay (s)</th>
        <th>Alarm Lasts (s)</th>
        <th>Avg Fing. [.6, 1]</th>
        {% endifequal %}
      </tr>
      {% for alarm in alarms %}
      <tr>
        <td>{{ alarm.1 }}</td>
        <!--<td>{{ alarm.0.time }}</td>-->
        <td>
          <a href="http://bgp.he.net/net/{{ alarm.0.prefix_dec }}" target="_blank">{{ alarm.0.prefix_dec }}</a>
          {% if alarm.8 %}<a href="#prefixes"><b>+{{ alarm.8|length }}</b></a>{% endif %}
        </td>
        <td>{{ alarm.9 }}</td>
        <td align=right>
          {% if alarm.0.homeas %}
          Origin changes from {% if alarm.0.oldhomeas %}<a href="http://bgp.he.net/AS{{ alarm.0.oldhomeas }}#_prefixes" target="_blank">AS{{ alarm.0.oldhomeas }}</a>{% else %}N/A{% endif %}
          to <a href="http://bgp.he.net/AS{{ alarm.0.homeas }}#_prefixes" target="_blank">AS{{ alarm.0.homeas }}</a>
          {% else %}
            {% if alarm.5 %}
          <a href="http://bgp.he.net/AS{{ alarm.5 }}#_graph4" target="_blank">AS{{ alarm.5 }}</a>
            {% else %}
            {% endif %}
          <a href="http://bgp.he.net/AS{{ alarm.6 }}#_graph4" target="_blank">AS{{ alarm.6 }}</a>
          <a href="http://bgp.he.net/AS{{ alarm.7 }}#_graph4" target="_blank">AS{{ alarm.7 }}</a>
          {% endif %}
        </td>
        <td align=right>{{ alarm.2 }}</td>
        <td align=right>{{ alarm.3 }}</td>
        <td align=right>{{ alarm.4 }}</td>
      </tr>
      {% endfor %}
      <tr><td colspan=7><br /></td></tr>
      <tr>
        <td align=right colspan=7>
          <div id="container" style="width: 100%"></div>
        </td>
      </tr>
    </table>
  </div><!--end featured-projects-->
  {% if user.is_authenticated %}
  {% if Advices %}
  <div id="featured-projects">
    <h4>Defence Advice of Prefix Hijacking about {{ alarms.0.0.prefix_dec }} (from BGPmon)</h4>
    <table rules=all>
      <tr>
        <th>AS Type</th>
        <th>Defence Advice</th>
		<th>Pseudo-Code</th>
      </tr>
	  {% autoescape off %}
      {% for advice in Advices %}
      <tr>
        <td style="color:red">{{ advice.asType }}</td>
		<td style="color:red">{{ advice.note }}</td>
        <td style="color:red">{{ advice.suggestion }}</td>
      </tr>
      {% endfor %}
	  {% endautoescape %}
    </table>
  </div><!--end featured-projects-->
  {% endif %}
  {% endif %} 
  <div id="featured-projects">
    <h4>BGP UPDATEs of {{ alarms.0.0.prefix_dec }} (from BGPmon)</h4>
    <table>
      <tr>
        <th>&Delta; t</th>
        <th>Timestamp</th>
        <th>Time (UTC)</th>
        <th>Monitor IP</th>
        <th>AS Path</th>
      </tr>
      {% autoescape off %}
      {% for u in upts %}
      <tr>
        <td>{{ u.0 }}</td>
        <td>{{ u.1 }}</td>
        <td>{{ u.2 }}</td>
        <td>{{ u.3 }}</td>
        <td>{{ u.5 }}</td>
      </tr>
      {% endfor %}
      {% endautoescape %}
    </table>
  </div><!--end featured-projects-->
  <div id="featured-projects">
    <h4 id="map_div">Geographical Plot <a href="/aspath/{{aid}}" >(Full Screen)</a></h4>
    <div id="map_canvas" style="height: 600px"></div>
  </div><!--end featured-projects-->
  {% if alarms.0.8 %}
  <div id="featured-projects">
    <h4>Other anomalous prefixes in this BGP update</h4><a name="prefixes"></a>
    <table id="otherprefix" class="tablesorter">
      <thead>
        <tr>
          <th>IP Prefix</th>
          <th>Country Code</th>
          <th>Country Name</th>
          <th>Origin Change</th>
        </tr>
      </thead>
      <tbody>
      {% for pfx in alarms.0.8 %}
        <tr>
          <td>
            <a href="http://bgp.he.net/net/{{ pfx.0 }}" target="_blank">
              {{ pfx.0 }}
            </a>
          </td>
          <td>{{ pfx.2 }}</td>
          <td>{{ pfx.3 }}</td>
          <td>
          {% if alarms.0.0.homeas %}
            {% if pfx.1 %}
            <a href="http://bgp.he.net/AS{{ pfx.1 }}#_prefixes" target="_blank">
              AS{{ pfx.1 }}
            </a>
            {% else %}N/A
            {% endif %}
            -&gt;
            <a href="http://bgp.he.net/AS{{ alarms.0.0.homeas }}#_prefixes" target="_blank">
              AS{{ alarms.0.0.homeas }}
            </a>
          {% endif %}
          </td>
        </tr>
      {% endfor %}
      </tbody>
    </table>
  </div><!--end featured-projects-->
  
  {% endif %}
  {% else %}
  <div id="featured-projects">
    <div align=center>No figureprint!</div>
  </div><!--end featured-projects-->
  {% endif %}
{% endblock %}
{% block js_script %}
  <script src="/static/jquery-latest.js"></script>
  <script type="text/javascript" src="/static/highcharts/highcharts.js"></script>
  <script type="text/javascript">
    var chart;
    $(document).ready(function() {
      chart = new Highcharts.Chart({
        chart: { renderTo: 'container', zoomType: 'x' },
        title: { text: 'Fingerprints and #eyes along with time' },
        xAxis: {
          min: 0,
          max: 120,
          title: { text: 'Seconds after the first anomalous BGP UPDATE' },
          type: 'linear'
        },
        yAxis: [{ // Fingerprints
          title: {
            text: 'Fingerprint',
            style: { color: '#4572A7' }
          },
          min: -1.0,
          max: 1.0,
          minorGridLineWidth: 0,
          gridLineWidth: 1,
          alternateGridColor: null,
          plotBands: [{ // Hijacking
            from: 0.6,
            to: 1.0,
            color: 'rgba(68, 170, 213, 0.1)',
            label: {
              text: 'Prefix Hijacking',
              style: { color: '#606060' }
            }
          }, { // Route Change
            from: -0.6,
            to: 0.6,
            color: 'rgba(0, 0, 0, 0)',
            label: {
              text: 'Route Change',
              style: { color: '#606060' }
            }
          }, { // Service Change
            from: -1.0,
            to: -0.6,
            color: 'rgba(68, 170, 213, 0.1)',
            label: {
              text: 'Service Change',
              style: { color: '#606060' }
            }
          }]
        }, { // # Anomalous Routers
          title: {
            text: '# Eyes',
            style: { color: '#AA4643' }
          },
          min: 0,
          max: 60,
          opposite: true
        }],
        tooltip: {
          shared: true,
          crosshairs: true,
          headerFormat: '<small>{point.key}-th second</small><br/>'
        },
        plotOptions: {
          column: {
            minPointLength: 1,
            pointPadding: 0,
            groupPadding: 0,
            borderWidth: 0.1,
            shadow: false
          },
          spline: { marker: { enabled: false, } }
        },
        series: [{
          name: 'Fingerprint',
          type: 'column',
          yAxis: 0,
          data: [
            {% for sg in sigs %} [{{ forloop.counter0 }}+{{ base }}, {{ sg }}], {% endfor %}
          ] 
        }, {
          name: '#Eyes (Polluted)',
          type: 'spline',
          yAxis: 1,
          data: [
            {% for ct in cnt0x %} [{{ forloop.counter0 }}+{{ base }}, {{ ct }}], {% endfor %}
          ] 
        }, {
          name: '#Eyes (Probe without reply)',
          type: 'spline',
          yAxis: 1,
          data: [
            {% for ct in cntx0 %} [{{ forloop.counter0 }}+{{ base }}, {{ ct }}], {% endfor %}
          ] 
        }, {
          name: '#Eyes (All)',
          type: 'spline',
          yAxis: 1,
          data: [
            {% for ct in cntxx %} [{{ forloop.counter0 }}+{{ base }}, {{ ct }}], {% endfor %}
          ] 
        }]
      });
    });
  </script>
  <script type="text/javascript" src="/static/jquery.tablesorter.js"></script>
  {% if alarms.0.8 %}
  <script type="text/javascript">
    $(document).ready(function(){ 
        $("#otherprefix").tablesorter();
      }
    );
  </script>
  {% endif %}
{% endblock %}
